<template>
	<view class="cpdd-date">
		<gui-datetime-between @confirm="handleChangeDate" :startValue="startTime" :endValue="endTime" :win="win">
			<view class="flex-ac" style="position: relative;">
				<input type="text" v-model="innerValue" disabled class="flex1" :placeholder="placeholder"
					placeholder-class="plStyle" style="pointer-events: none;opacity: 0;" />
				<text class="showname bgfff" v-if="!disabled"
					:class="{'plStyle':!innerLabel}">{{innerLabel||placeholder}}</text>
				<text class="showname bgfff" v-else>{{innerLabel||'-'}}</text>
				<text class="gui-icons f40 c999" v-if="!disabled">&#xe661;</text>
			</view>
		</gui-datetime-between>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: []
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			monthNumber: {
				type: Number,
				default: 12
			},
			disabled: {
				type: Boolean,
				default: false
			},
			win: {
				type: String,
				default: ''
			},

		},
		watch: {
			value(val) {
				this.setDefault()
			},
		},
		data() {
			return {
				innerValue: '',
				innerLabel: '',
				startTime: '',
				endTime: ''
			}
		},
		created() {
			this.setDefault()
		},
		methods: {
			setDefault() {
				this.innerValue = ''
				this.innerLabel = ''
				if (!this.value.length) return;
				let cpddDateRangeVal = JSON.parse(this.value)
				this.startTime = cpddDateRangeVal[0];
				this.endTime = cpddDateRangeVal[1]
				// 设置默认区间
				this.innerLabel = this.startTime + '~' + this.endTime
				this.innerValue = JSON.stringify([this.startTime, this.endTime])
			},
			handleChangeDate(res) {
				console.log(res);
				this.startTime = res[0][0] + '-' + res[0][1] + '-' + res[0][2] + ' ' + res[0][3] + ':' + res[0][4] + ':' +
					res[0][5];
				this.endTime = res[1][0] + '-' + res[1][1] + '-' + res[1][2] + ' ' + res[1][3] + ':' + res[1][4] + ':' +
					res[1][5];
				this.innerLabel = this.startTime + '~' + this.endTime
				this.innerValue = JSON.stringify([this.startTime, this.endTime])
				this.$emit('input', this.innerValue)
				this.$emit('change', this.innerValue)
			}

		}
	}
</script>

<style scoped>
	.showname {
		position: absolute;
		left: 0;
		width: 450rpx;
		overflow: hidden;
	}
</style>